<template>
	<view class="personal">
		<!-- 头部 -->
		<view class="header">
			<view class="logins">
				<view class="logins_s">
					<navigator :url=" uers!='' ? '/pageageA/pages/edit/index' : '/pages/register/login'" class="intro  clearfix">
						<image v-if="uers&&uers.portrait" :src="uers.portrait" mode="widthFix" class="fl"></image>
						<image v-else :src=" uers=='' ? '/static/images/top_image_photo@2x.png' : uers.sex == '男' ? '/static/images/middle_image_man@2x.png' : '/static/images/middle_image_woman@2x.png'" mode="aspectFill" class="fl"></image>
					</navigator>
					<view class="logins_s1">
						<view class="name" style="color: #FFFFFF;">{{ uers=='' ? '未登录' : uers.nickname ? uers.nickname : uers.phone}}</view>
						<navigator :url=" uers.phone=='' ? '/pageageA/pages/register/bindPhone' : '/pageageA/pages/register/bindPhone'" class="intro  clearfix">
							<view style="font-size: 24rpx;">{{ uers.phone=='' || uers.phone == null ?  '绑定手机号' : uers.phone }}</view>
						</navigator>
					</view>
				</view>
				<navigator :url="hasLogin ?'/pageageA/pages/fen/erweima': '/pages/register/login'">
				<image class="erw" src="../../static/img/ewm.png" mode="widthFix"></image>
				</navigator>
			</view>
			
			<view class="balance">
				<navigator :url="hasLogin ?'/pageageA/pages/balance/index': '/pages/register/login'">
					<view>
						<view>
						{{uers=='' ? 0 : balances.balances}}
						</view>
						<view class="tit">
							余额</view>
					</view>
				</navigator>
				<navigator :url="hasLogin ?'/pageageA/pages/balance/share': '/pages/register/login'">
					<view>
						<view>
							{{uers==''? 0 : balances.brokerage}}
						</view>
						<view class="tit">
							分享金</view>
					</view>
				</navigator>
				<navigator :url="hasLogin ?'/pageageA/pages/fen/ticket':'/pages/register/login'">
					<view>
						<view>
							{{uers==''? 0 : balances.coupons}}
						</view>
						<view class="tit">
							优惠券
						</view>
					</view>
				</navigator>
			</view>
		</view>
		<!-- end -->

		<!-- 功能列表 -->
		<view class="nav">
			<view class="nav-list" style="background-color: #FFFFFF;padding: 0 32rpx;">
				<navigator :url="hasLogin ?'/pageageA/pages/fen/news':'/pages/register/login'">
					<view class="clearfixs">
						<view class="clearfixs_s">
							<image src="/static/img/xiaoxi.png" mode="widthFix" class="fl"></image>
							<view class="fls">我的消息</view>
						</view>
						<image src="/static/img/r-arrow.png" mode="widthFix" class="fr"></image>
					</view>
				</navigator>
				<navigator :url="hasLogin ?'/pageageA/pages/fen/follow':'/pages/register/login'">
					<view class="clearfixs">
						<view class="clearfixs_s">
							<image src="/static/img/shoucang.png" mode="widthFix" class="fl"></image>
							<view class="fls">我的关注</view>
						</view>
						<image src="/static/img/r-arrow.png" mode="widthFix" class="fr"></image>
					</view>
				</navigator>
				<navigator :url="hasLogin ?'/pageageA/pages/address/index':'/pages/register/login'">
					<view class="clearfixs">
						<view class="clearfixs_s">
						<image src="/static/img/address.png" mode="widthFix" class="fl"></image>
						<view class="fls">我的地址</view>
						</view>
						<image src="/static/img/r-arrow.png" mode="widthFix" class="fr"></image>
					</view>
				</navigator>
				</view>
				<view class="nav-list" style="background-color: #FFFFFF;padding: 0 32rpx;">
				
				<navigator url="/pageageA/pages/fen/about">
					<view class="clearfixs">
						<view class="clearfixs_s">
						<image src="/static/img/ours.png" mode="widthFix" class="fl"></image>
						<view class="fls">关于我们</view>
						</view>
						<image src="/static/img/r-arrow.png" mode="widthFix" class="fr"></image>
					</view>
				</navigator>
				<navigator url="/pageageA/pages/fen/index">
					<view class="clearfixs">
						<view class="clearfixs_s">
						<image src="/static/img/personal.png" mode="widthFix" class="fl"></image>
						<view class="fls">用户协议</view>
						</view>
						<image src="/static/img/r-arrow.png" mode="widthFix" class="fr"></image>
					</view>
				</navigator>
				<navigator url="/pageageA/pages/fen/ask">
					<view class="clearfixs">
						<view class="clearfixs_s">
						<image src="/static/img/problem.png" mode="widthFix" class="fl"></image>
						<view class="fls">常见问题</view>
						</view>
						<image src="/static/img/r-arrow.png" mode="widthFix" class="fr"></image>
					</view>
				</navigator>
					<navigator url="/pageageA/pages/setup">
						<view class="clearfixs">
							<view class="clearfixs_s">
							<image src="/static/img/settings.png" mode="widthFix" class="fl"></image>
							<view class="fls">设置</view>
							</view>
							<image src="/static/img/r-arrow.png" mode="widthFix" class="fr"></image>
						</view>
					</navigator>
			</view>
		</view>
		<!-- end -->
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	components:{
		
	},
	computed: mapState(['hasLogin', 'uerInfo']),
	data() {
		return {
			uers:'',
			balances:'',
		};
	},
	onShow(){
		var _this = this
		this.uers=''
		this.balances = ''
		if(this.hasLogin){
			_this.$http.get('/personal/center/getuser/'+this.uerInfo.userId).
			then(function (response) {
				console.log('个人信息',response.data)
				if(response.msg == '登录异常'){
					// _this.bindLogin()
				}else{
					_this.uers = response.data
				}
			}).catch(function (error) {
				console.log(error);
			});	
					
			_this.$http.get('/personal/center/getbrokerageandbalances/'+this.uerInfo.userId).
			then(function (response) {
				if(response.msg == '登录异常'){
					// _this.bindLogin()
				}else{
					_this.balances = response.data
				}
			}).catch(function (error) {
				console.log(error);
			});
		}
	},
	methods: {
		...mapMutations(['logout']),
		exit() {
			var _this = this
			uni.showModal({
			    title: '',
			    content: '确定退出当前账号',
				cancelColor: '#57BFFF',
				confirmColor: '#57BFFF',
			    success: function (res) {
			        if (res.confirm) {
						_this.logout()
			        } else if (res.cancel) {
			            console.log('用户点击取消');
			        }
			    }
			});
		},
		allorder(){
			uni.switchTab({
				url:'/pages/order/index'
			})
		},
	}
};
</script>

<style scoped lang="scss">
.header {
	width: 100%;
	height: 280rpx;
	// background-color: $uni-color1;
	margin-bottom: 16rpx;
	background-color:#FF9700;
}
.header .intro {
	overflow: hidden;
	// padding-top: 35rpx;
	color: #fff;
	font-size: 30rpx;
	line-height: 42rpx;
}
.header .intro image {
	width: 118rpx;
	height: 118rpx !important;
	border-radius: 100%;
	margin-right: 20rpx;
	background-size: cover;
	background-position: center 0;
}
.header .intro .name {
	font-size: 30rpx;
	font-weight: 500;
	text-align: center;
	padding: 0!important;
	font-size: 40rpx;
	// line-height: 67rpx;
}
.balance {
	width: 95%;
	display: flex;
	height:150rpx;
	color: #000000;
	font-size: 36rpx;
	line-height: 50rpx;
	text-align: center;
	background-color: #fff;
	border-radius: 10rpx;
	margin: 0 auto;
	margin-top: 40rpx;
	border-bottom: 1rpx solid #eeeeee;
}
.balance > navigator {
	/* padding: 0 100rpx; */
	width: 49.5%;
	padding-top: 40rpx;
}
// .balance > navigator:first-child {
// 	border-right: 1rpx solid rgba(255, 255, 255, 0.4);
// }
.balance > navigator .tit {
	font-size: 24rpx;
	// font-weight: bold;
	line-height: 33rpx;
	margin-bottom: 10rpx;
	color: #666666;
}
.nav {
	margin: 0 auto;
	margin-top: 90rpx;
}
.nav .nav-list {
	margin-bottom: 16rpx;
	// border-radius: 20rpx;
}
.nav .nav-list navigator > view {
	font-size: 34rpx;
	color: #666;
	height: 80rpx;
	line-height: 105rpx;
	border-bottom: 1rpx solid #dfdfdf;
}
.nav .nav-list navigator > view:last-child {
	border: 0 none;
}
.nav .nav-list navigator > view image {
	width: 40rpx;
	// margin-top: 34rpx;
	margin-right: 20rpx;
}
.nav .nav-list navigator > view .fr {
	margin-right: 0;
	margin-top: 40rpx;
	width: 13rpx;
}
.erw{
	width: 40rpx;
	height: 40rpx;
	background: #f9c47d;
	padding: 20rpx;
	border-radius: 50%;
	margin-top: 76rpx;
}
.ding{
	display: flex;justify-content: space-between;
	padding-bottom: 20rpx;border-bottom: 2rpx solid #eeeeee;
}
.dan{
	display: flex;justify-content: space-between;align-items: center;height:142rpx;background-color: #FFFFFF;padding: 0 37rpx;border-radius: 10rpx;
}
.ding_dan{
	text-align: center;
}
.ding_dan image{
	width: 40rpx;
	height: 40rpx;
}
.ding_dan .zi{
	font-size: 28rpx;
	margin-top: 10rpx;
	color: #333333;
}
.loginout{
	width: 92%;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 10rpx;
	background-color: #FFFFFF;
	margin: 0 auto;
	text-align: center;
	margin-top: 25rpx;
}
.all{
	color: #a3a3a3;display: flex;align-items: center;
}
.all view{
	margin-right: 10rpx;
}
.all image{
	width: 16rpx;height: 16rpx;
}
.logins{
	display: flex;align-items: center;justify-content: space-between;padding: 0 32rpx;
}
.logins .logins_s{
	display: flex;padding: 52rpx 32rpx 0 32rpx;
}
.logins .logins_s1{
	margin-top: 20rpx;
}
.clearfixs{
	display: flex;justify-content: space-between;
}
.clearfixs_s{
	display: flex;
	align-items: center;
}
.clearfixs_s .fls{
	font-size: 30rpx;
	color: #000;
}
</style>
